<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>图片等多媒体处理</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 460px;
        --box-height: fit-content;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .case1 {
        background: red;
        width: 100%;
      }
      .case1 img {
        width: 100%;
        height: 370px;
      }
      input:nth-of-type(1):checked ~ .case1 img {
        object-fit: fill;
      }
      input:nth-of-type(2):checked ~ .case1 img {
        object-fit: contain;
      }
      input:nth-of-type(3):checked ~ .case1 img {
        object-fit: cover;
      }
      input:nth-of-type(4):checked ~ .case1 img {
        object-fit: none;
      }
      input:nth-of-type(5):checked ~ .case1 img {
        object-fit: scale-down;
      }

      .case2 {
        width: 260px;
        height: 320px;
        border: 1px dashed red;
      }
      .case2 img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: 50% 10%;
      }
      .case2-animation {
        width: 260px;
        height: 320px;
        border: 1px dashed red;
      }
      .case2-animation img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        animation: case2 0.8s steps(28) infinite both;
      }
      @keyframes case2 {
        0% {
          object-position: 0%;
        }
        100% {
          object-position: 100%;
        }
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./21.@media适配.html">上一篇</a>
      <a href="./23-滤镜属性filter.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>object-fit</dt>
        <dd style="height: 100%;">
          <input type="radio" name="case1" value="1" />
          fill(default)
          <input type="radio" name="case1" value="2" />
          contain
          <input type="radio" name="case1" value="3" />
          cover
          <input type="radio" name="case1" value="4" />
          none
          <input type="radio" name="case1" value="5" />
          scale-down
          <div class="case1">
            <img src="../../Source/violet-ever-garden.jpg" />
          </div>
          <p>
            ps:
            特别说一下scale-down，就如同依次设置了none和contain，然后选取呈现尺寸更小的那个
          </p>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>object-position</dt>
        <dd>
          <p><i>语法</i></p>
          <pre><code class="language-scss">object-position: &lt;position&gt;</code></pre>
          默认值是50% 50%
          <div class="case2">
            <img src="../../Source/violet-ever-garden.jpg" />
          </div>
        </dd>
        <dd>
          <h4>可以轻松实现懒加载gif</h4>
          <div class="case2-animation">
            <img src="../../Source/heart-animation.png" />
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>image-orientation纠正图片方向</dt>
        <dd>
          <ul>
            <li><b>from-image</b>:初始值，若图片包含旋转信息，则旋转之</li>
            <li><b>none</b>:无论有无Exif信息，都不旋转</li>
          </ul>
        </dd>
        <dt>image-render图片缩放策略</dt>
        <dd>
          各浏览器支持程度不同
          <ul>
            <li><b>auto</b>：浏览器自行选择，一般是平滑缩放</li>
            <li><b>crisp-edges</b>：不使用平滑缩放，会有较高的对比度和锐利边缘</li>
            <li><b>pixelated</b>：必须使用邻近算法</li>
          </ul>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
